WebXR Hit Test Result: Ray Casting Result Processing for Immersive Experiences

WebXR Device API avaa jännittäviä mahdollisuuksia luoda mukaansatempaavia lisätyn todellisuuden (AR) ja virtuaalitodellisuuden (VR) kokemuksia suoraan selaimessa. Yksi interaktiivisten WebXR-sovellusten rakentamisen perusasioista on osumakokeiden tulosten ymmärtäminen ja tehokas hyödyntäminen. Tämä blogikirjoitus tarjoaa kattavan oppaan säteenheiton avulla saatujen osumakokeiden tulosten käsittelyyn, jonka avulla voit luoda intuitiivisia ja mukaansatempaavia käyttäjävuorovaikutuksia WebXR-näkymissäsi.

What is Ray Casting and Why is it Important in WebXR?

Säteenheitto on tekniikka, jota käytetään määrittämään, leikkaako säde, joka lähtee tietystä pisteestä tiettyyn suuntaan, 3D-näkymän objekteja. WebXR:ssä säteenheittoa käytetään tyypillisesti simuloimaan käyttäjän katsetta tai virtuaalisen objektin liikerataa. Kun säde leikkaa todellisen pinnan (AR:ssä) tai virtuaalisen objektin (VR:ssä), luodaan osumakokeen tulos.

Osumakokeiden tulokset ovat ratkaisevan tärkeitä useista syistä:

• Virtuaaliobjektien sijoittaminen: AR:ssä osumakokeiden avulla voit sijoittaa virtuaaliobjekteja tarkasti todellisille pinnoille, kuten pöydille, lattioille tai seinille.
• Käyttäjävuorovaikutus: Seuraamalla, mihin käyttäjä katsoo tai osoittaa, osumakokeet mahdollistavat vuorovaikutuksen virtuaaliobjektien kanssa, kuten valitsemisen, manipuloinnin tai aktivoimisen.
• Navigointi: VR-ympäristöissä osumakokeita voidaan käyttää navigointijärjestelmien toteuttamiseen, jolloin käyttäjät voivat teleportoida tai liikkua näkymässä osoittamalla tiettyjä paikkoja.
• Törmäyksen havaitseminen: Osumakokeita voidaan käyttää perusmuotoiseen törmäyksen havaitsemiseen, jolla määritetään, milloin virtuaalinen objekti törmää toiseen objektiin tai todelliseen maailmaan.

Understanding the WebXR Hit Test API

WebXR Hit Test API tarjoaa tarvittavat työkalut säteenheiton suorittamiseen ja osumakokeiden tulosten hankkimiseen. Tässä on erittely avainkäsitteistä ja -funktioista:

XRRay

XRRay edustaa sädettä 3D-tilassa. Sen määrittää alkupiste ja suuntavektori. Voit luoda XRRay:n XRFrame.getPose() -menetelmällä, joka palauttaa seurattavan syöttölähteen asennon (esim. käyttäjän pään, käden ohjaimen). Asennosta voit johtaa säteen alkupisteen ja suunnan.

XRHitTestSource

XRHitTestSource edustaa osumakokeiden tulosten lähdettä. Luot osumakokeen lähteen XRSession.requestHitTestSource()- tai XRSession.requestHitTestSourceForTransientInput() -menetelmällä. Ensimmäistä menetelmää käytetään yleensä jatkuvaan osumakokeiluun pysyvän lähteen perusteella, kuten käyttäjän pään asennon perusteella, kun taas toinen on tarkoitettu ohimeneviin syöttötapahtumiin, kuten painikkeen painalluksiin tai eleisiin.

XRHitTestResult

XRHitTestResult edustaa yhtä leikkauspistettä säteen ja pinnan välillä. Se sisältää tietoja leikkauksesta, kuten etäisyyden säteen alkupisteestä osumapisteeseen ja osumapisteen asennon näkymän vertailutilassa.

XRHitTestResult.getPose()

Tämä menetelmä palauttaa osumapisteen XRPose:n. Asento sisältää osumapisteen sijainnin ja suunnan, jota voidaan käyttää virtuaaliobjektien sijoittamiseen tai muiden muunnosten suorittamiseen.

Processing Hit Test Results: A Step-by-Step Guide

Käydään läpi osumakokeiden tulosten hankkimista ja käsittelyä WebXR-sovelluksessa. Tämä esimerkki olettaa, että käytät renderöintikirjastoa, kuten three.js tai Babylon.js.

1. Requesting a Hit Test Source

Ensin sinun on pyydettävä osumakokeen lähde XRSession:ltä. Tämä tehdään tyypillisesti istunnon alkamisen jälkeen. Sinun on määritettävä koordinaatisto, jossa haluat osumakokeiden tulosten palautettavan. Esimerkiksi:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Explanation:

• xrSession.requestHitTestSource(): Tämä funktio pyytää osumakokeen lähteen XR-istunnosta.
• { space: xrSession.viewerSpace }: Tämä määrittää koordinaatiston, jossa osumakokeiden tulokset palautetaan. viewerSpace on suhteessa katsojan sijaintiin, kun taas local on suhteessa XR-alkuperään. Voit myös käyttää localFloor-asetusta seurantaan suhteessa lattiaan.
• Virheiden käsittely: try...catch -lohko varmistaa, että osumakokeen lähteen luomisen aikana tapahtuvat virheet otetaan kiinni ja kirjataan.

2. Performing the Hit Test in the Animation Loop

Animaatiosilmukassasi (funktio, joka renderöi jokaisen kehyksen) sinun on suoritettava osumakoe XRFrame.getHitTestResults() -menetelmällä. Tämä menetelmä palauttaa taulukon XRHitTestResult-objekteja, jotka edustavat kaikkia näkymässä löydettyjä leikkauksia.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Explanation:

• frame.getViewerPose(xrSession.referenceSpace): Hankkii katsojan (kuulokkeiden) asennon. Tämä on välttämätöntä, jotta tiedetään, missä katsoja on ja mihin hän katsoo.
• frame.getHitTestResults(xrHitTestSource): Suorittaa osumakokeen aiemmin luodun osumakokeen lähteen avulla.
• hitTestResults.length > 0: Tarkistaa, onko leikkauksia löydetty.

3. Processing the Hit Test Results

processHitTestResults() -funktio on paikka, jossa käsittelet osumakokeen tulokset. Tämä sisältää tyypillisesti virtuaalisen objektin sijainnin ja suunnan päivittämisen osumapisteen asennon perusteella.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Explanation:

• hitTestResults[0]: Hakee ensimmäisen osumakokeen tuloksen. Jos useita leikkauksia on mahdollisia, saatat joutua iteroimaan koko taulukon läpi ja valitsemaan sopivimman tuloksen sovelluksesi logiikan perusteella.
• hit.getPose(xrSession.referenceSpace): Hankkii osumapisteen asennon määritetyssä vertailutilassa.
• virtualObject.position.set(...) ja virtualObject.quaternion.set(...): Päivitä virtuaalisen objektin (esim. three.js Mesh) sijainti ja pyöritys (kvaternio) vastaamaan osumapisteen asentoa.
• Visuaalinen palaute: Esimerkki sisältää myös koodin, jolla näytetään visuaalista palautetta osumapisteessä, kuten ympyrä tai yksinkertainen merkki, jotta käyttäjä ymmärtää, missä hän on vuorovaikutuksessa näkymän kanssa.

Advanced Hit Testing Techniques

Perusesimerkin lisäksi on olemassa useita edistyneitä tekniikoita, joiden avulla voit parantaa osumakokeiden toteutuksia:

Hit Testing with Transient Input

Ohimenevän syötteen, kuten painikkeen painallusten tai käden eleiden, laukaisemiin vuorovaikutuksiin voit käyttää XRSession.requestHitTestSourceForTransientInput() -menetelmää. Tämä menetelmä luo osumakokeen lähteen, joka on ominainen yhdelle syöttötapahtumalle. Tämä on hyödyllistä, jotta vältetään tahattomat vuorovaikutukset, jotka perustuvat jatkuvaan osumakokeiluun.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Filtering Hit Test Results

Joissakin tapauksissa saatat haluta suodattaa osumakokeiden tuloksia tiettyjen kriteerien perusteella, kuten etäisyys säteen alkupisteestä tai leikatun pinnan tyyppi. Voit saavuttaa tämän suodattamalla XRHitTestResult -taulukon manuaalisesti sen hankkimisen jälkeen.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Using Different Reference Spaces

Vertailutilan valinta (viewerSpace, local, localFloor tai muut mukautetut tilat) vaikuttaa merkittävästi osumakokeiden tulosten tulkintaan. Harkitse seuraavaa:

• viewerSpace: Tarjoaa tuloksia suhteessa katsojan sijaintiin. Tämä on hyödyllistä luotaessa vuorovaikutuksia, jotka liittyvät suoraan käyttäjän katseeseen.
• local: Tarjoaa tuloksia suhteessa XR-alkuperään (XR-istunnon alkupisteeseen). Tämä sopii kokemusten luomiseen, joissa objektit pysyvät kiinteinä fyysisessä ympäristössä.
• localFloor: Samanlainen kuin local, mutta Y-akseli on kohdistettu lattiaan. Tämä yksinkertaistaa objektien sijoittamista lattialle.

Valitse vertailutila, joka vastaa parhaiten sovelluksesi vaatimuksia. Kokeile eri vertailutiloja ymmärtääksesi niiden käyttäytymistä ja rajoituksia.

Optimization Strategies for Hit Testing

Osumakokeilu voi olla laskennallisesti raskas prosessi, erityisesti monimutkaisissa näkymissä. Tässä on joitain optimointistrategioita, joita kannattaa harkita:

• Limit the Frequency of Hit Tests: Suorita osumakokeita vain tarvittaessa, ei jokaisessa kehyksessä. Voit esimerkiksi suorittaa osumakokeita vain, kun käyttäjä on aktiivisesti vuorovaikutuksessa näkymän kanssa.
• Use a Bounding Volume Hierarchy (BVH): Jos suoritat osumakokeita suurta määrää objekteja vastaan, harkitse BVH:n käyttöä leikkauslaskelmien nopeuttamiseksi. Kirjastot, kuten three.js ja Babylon.js, tarjoavat sisäänrakennettuja BVH-toteutuksia.
• Spatial Partitioning: Jaa näkymä pienempiin alueisiin ja suorita osumakokeita vain alueilla, jotka todennäköisesti sisältävät leikkauksia. Tämä voi vähentää merkittävästi tarkistettavien objektien määrää.
• Reduce Polygon Count: Yksinkertaista malliesi geometriaa vähentääksesi testattavien polygonien määrää. Tämä voi parantaa suorituskykyä erityisesti mobiililaitteilla.
• WebWorker: siirrä laskenta web workeriin varmistaaksesi, että osumakokeen prosessi ei lukitse pääsäiettä.

Cross-Platform Considerations

WebXR pyrkii olemaan alustojen välinen, mutta eri laitteiden ja selainten välillä voi olla hienovaraisia eroja käyttäytymisessä. Muista seuraavat asiat:

• Device Capabilities: Kaikki laitteet eivät tue kaikkia WebXR-ominaisuuksia. Käytä ominaisuuksien tunnistusta määrittääksesi, mitkä ominaisuudet ovat käytettävissä, ja mukauta sovellustasi sen mukaan.
• Input Profiles: Eri laitteet voivat käyttää eri syöttöprofiileja (esim. generic-touchscreen, kädenseuranta, peliohjain). Varmista, että sovelluksesi tukee useita syöttöprofiileja ja tarjoaa asianmukaiset varamekanismit.
• Performance: Suorituskyky voi vaihdella merkittävästi eri laitteissa. Optimoi sovelluksesi alhaisimman tason laitteille, joita aiot tukea.
• Browser Compatibility: Varmista, että sovelluksesi on testattu ja toimii tärkeimmissä selaimissa, kuten Chromessa, Firefoxissa ja Edgessä.

Global Examples of WebXR Applications Using Hit Testing

Tässä on joitain esimerkkejä WebXR-sovelluksista, jotka hyödyntävät tehokkaasti osumakokeilua luodakseen houkuttelevia ja intuitiivisia käyttökokemuksia:

• IKEA Place (Ruotsi): Sallii käyttäjien sijoittaa IKEA-huonekaluja virtuaalisesti koteihinsa AR:n avulla. Osumakokeilua käytetään sijoittamaan huonekalut tarkasti lattialle ja muille pinnoille.
• Sketchfab AR (Ranska): Mahdollistaa käyttäjien katsella 3D-malleja Sketchfabista AR:ssä. Osumakokeilua käytetään mallien sijoittamiseen todelliseen maailmaan.
• Augmented Images (Various): Monet AR-sovellukset käyttävät kuvien seurantaa yhdistettynä osumakokeiluun virtuaalisen sisällön ankkuroimiseksi tiettyihin kuviin tai merkkeihin todellisessa maailmassa.
• WebXR Games (Global): Lukuisia pelejä kehitetään WebXR:n avulla, ja monet niistä luottavat osumakokeiluun objektien sijoittamisessa, vuorovaikutuksessa ja navigoinnissa.
• Virtual Tours (Global): Paikkojen, museoiden tai kiinteistöjen mukaansatempaavat kiertoajelut käyttävät usein osumakokeilua käyttäjien navigointiin ja interaktiivisiin elementteihin virtuaalisessa ympäristössä.

Conclusion

WebXR-osumakokeiden tulosten ja säteenheiton käsittelyn hallitseminen on välttämätöntä, jotta voidaan luoda houkuttelevia ja intuitiivisia AR- ja VR-kokemuksia verkossa. Ymmärtämällä peruskäsitteet ja soveltamalla tässä blogikirjoituksessa kuvattuja tekniikoita voit luoda mukaansatempaavia sovelluksia, jotka yhdistävät saumattomasti virtuaalisen ja todellisen maailman, tai luoda kiinnostavia virtuaaliympäristöjä luonnollisilla ja intuitiivisilla käyttäjävuorovaikutuksilla. Muista optimoida osumakokeiden toteutus suorituskyvyn varmistamiseksi ja ottaa huomioon alustojen välinen yhteensopivuus, jotta voidaan varmistaa sujuva kokemus kaikille käyttäjille. WebXR-ekosysteemin kehittyessä jatkuvasti voidaan odottaa edistystä ja tarkennuksia osumakokeiden API:in, mikä avaa entistä enemmän luovia mahdollisuuksia mukaansatempaavaan web-kehitykseen. Tarkista aina uusimmat WebXR-määritykset ja selaindokumentaatio saadaksesi ajantasaisimmat tiedot.